<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="请输入用户ID"
      />
      <el-select v-model="listQuery.type" filterable clearable>
        <el-option :value="0" label="封号" />
        <el-option :value="1" label="禁聊" />
      </el-select>
      <el-select v-model="listQuery.release" filterable clearable>
        <el-option :value="0" label="未解封" />
        <el-option :value="1" label="解封" />
      </el-select>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
      <el-button type="danger" @click="onBatchForbid">批量封号</el-button>
      <el-button type="warning" @click="onBatchUnForbid">批量解号</el-button>
    </div>

    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 300px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="用户ID" prop="userId">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.userId" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="封禁时间">
          <template slot-scope="{ row }">{{ row.createTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="封禁时长">
          <template slot-scope="{ row }">
            <template v-if="row.hours > 24">{{ row.days }}天</template>
            <template v-else>{{ row.hours }}小时</template>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否解禁">
          <template slot-scope="{ row }">
            {{ row.release===1? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="封禁类型">
          <template slot-scope="{ row }">
            {{
              typeItem[row.type]
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="禁聊类型">
          <template slot-scope="{ row }">
            <template v-for="bannedType in row.bannedTypeList">
              {{ bannedTypeItem[bannedType] }},
            </template>
          </template>
        </el-table-column>
        <el-table-column align="center" label="理由">
          <template slot-scope="{ row }">{{ row.reason }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" fixed="right" width="160">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.type===0 && row.release === 0"
              type="danger"
              size="mini"
              @click="onUnForbid(row)"
            >解封</el-button>
            <el-button
              v-if="row.type===1 && row.release === 0"
              type="danger"
              size="mini"
              @click="onUnForbid(row)"
            >解禁</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.pageNum"
        :limit="listQuery.pageSize"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <DialogForbidAccount
      :visible.sync="forbidDialogVisible"
      :user-ids="forbidAccounts"
      :forbid-type="forbidType"
      @onSuccess="doSearch"
    />
    <DailogUnForbidAccount
      :visible.sync="unForbidDialogVisible"
      :user-ids="forbidAccounts"
      :forbid-type="forbidType"
      @onSuccess="doSearch"
    />
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import DailogUnForbidAccount from './components/DialogUnForbidAccount'
import DialogForbidAccount from './components/DialogForbidAccount'

import { xhrForbidRecordList } from '@api/account'
export default {
  name: 'RoleList',
  components: { TablePagination, DialogForbidAccount, DailogUnForbidAccount },
  data() {
    return {
      list: null,
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 10
      },
      typeItem: {
        0: '封号', 1: '禁聊', 2: '解封', 3: '解禁'
      },
      bannedTypeItem: {
        'BANNED_ANCHOR_TAB': '不在缘分内显示',
        'BANNED_UNASSIGNED_GREETING': '不分配打招呼',
        'BANNED_GREET_PEOPLE_NEARBY': '无法给附近人打招呼',
        'BANNED_RANDOM_CHAT_ASSIGNED': '不分配随机文字、语音、视频',
        'BANNED_SEND_ACTION': '无法发动态',
        'BANNED_RECOVER_DYNAMIC': '无法回复动态'
      },
      forbidType: '0',
      forbidDialogVisible: false,
      unForbidDialogVisible: false,
      forbidAccounts: ''
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      this.listLoading = true
      this.listQuery.pageNum = this.listQuery.page
      this.listQuery.pageSize = this.listQuery.limit
      xhrForbidRecordList(this.listQuery)
        .then(resp => {
          this.list = resp.data.list
          this.total = resp.data.total
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    onUnForbid(row) {
      this.forbidType = row.type === 0 ? '1' : '3'
      this.unForbidDialogVisible = true
      this.forbidAccounts = row.userId
    },
    onBatchForbid() {
      this.forbidType = 'batch'
      this.forbidAccounts = ''
      this.forbidDialogVisible = true
    },
    onBatchUnForbid() {
      this.forbidType = 'batch'
      this.forbidAccounts = ''
      this.unForbidDialogVisible = true
    }
  }
}
</script>
